<template>
  <div class="hv-form-property-container" v-hv-scrollbar>
    <div class="hv-form-data-container">
      <a-row>
        <a-col :span="24" class="hv-visual-property-label">所属类别：</a-col>
      </a-row>
      <a-row class="hv-margin-bottom10">
        <a-col :span="24">
          <a-select
            size="small"
            show-search
            v-model:value="categoryId"
            placeholder="所属类别选择..."
            dropdownClassName="hv-dark-select-dropdown"
            @change="selectCategory"
          >
            <template v-if="categoryList && categoryList.length > 0">
              <a-select-option
                :value="option.dashboardCategoryId"
                v-for="(option, index) in categoryList"
                :key="index"
              >
                {{ option.dashboardCategoryLabel }}
              </a-select-option>
            </template>
          </a-select>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24" class="hv-visual-property-label">画布名称：</a-col>
      </a-row>
      <a-row class="hv-margin-bottom10">
        <a-col :span="24">
          <a-input v-model:value="canvasPropData.label" v-if="canvasPropData" />
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24" class="hv-visual-property-label">分辨率：</a-col>
      </a-row>
      <a-row class="hv-margin-bottom10">
        <a-col :span="24">
          <a-select
            size="small"
            show-search
            placeholder="分辨率快捷选择..."
            @change="selectResolutionRatio"
            dropdownClassName="hv-dark-select-dropdown"
          >
            <template v-if="resolutionRatioList && resolutionRatioList.length > 0">
              <a-select-option
                :value="option.value"
                v-for="(option, index) in resolutionRatioList"
                :key="index"
              >
                {{ option.label }}
              </a-select-option>
            </template>
          </a-select>

          <hv-visual-property-sub-row>
            <template #leftTitle>宽度(px)： </template>
            <template #leftContent>
              <a-input-number
                v-if="canvasPropData && canvasPropData.canvasDimensions"
                v-model:value="canvasPropData.canvasDimensions.width"
                :min="0"
                :max="99999"
                :step="2"
                size="small"
              />
            </template>
            <template #rightTitle>高度(px)： </template>
            <template #rightContent>
              <a-input-number
                v-if="canvasPropData && canvasPropData.canvasDimensions"
                v-model:value="canvasPropData.canvasDimensions.height"
                :min="0"
                :max="99999"
                :step="2"
                size="small"
              />
            </template>
          </hv-visual-property-sub-row>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24" class="hv-visual-property-label">背景图：</a-col>
      </a-row>
      <a-row class="hv-margin-bottom10">
        <a-col :span="24">
          <hv-background-image
            v-if="canvasPropData && canvasPropData.styleProps"
            :compData="canvasPropData"
          />
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24" class="hv-visual-property-label">背景色：</a-col>
      </a-row>
      <a-row class="hv-margin-bottom10">
        <a-col :span="24">
          <hv-color-dropdown-picker
            v-if="canvasPropData && canvasPropData.styleProps"
            v-model:color="canvasPropData.styleProps.backgroundColor"
            size="small"
          />
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24" class="hv-visual-property-label">上边框：</a-col>
      </a-row>
      <a-row class="hv-margin-bottom10">
        <a-col :span="24">
          <hv-border-style-input
            v-if="canvasPropData && canvasPropData.styleProps"
            v-model:value="canvasPropData.styleProps.borderTop"
          />
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24" class="hv-visual-property-label">下边框：</a-col>
      </a-row>
      <a-row class="hv-margin-bottom10">
        <a-col :span="24">
          <hv-border-style-input
            v-if="canvasPropData && canvasPropData.styleProps"
            v-model:value="canvasPropData.styleProps.borderBottom"
          />
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24" class="hv-visual-property-label">左边框：</a-col>
      </a-row>
      <a-row class="hv-margin-bottom10">
        <a-col :span="24">
          <hv-border-style-input
            v-if="canvasPropData && canvasPropData.styleProps"
            v-model:value="canvasPropData.styleProps.borderLeft"
          />
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24" class="hv-visual-property-label">右边框：</a-col>
      </a-row>
      <a-row class="hv-margin-bottom10">
        <a-col :span="24">
          <hv-border-style-input
            v-if="canvasPropData && canvasPropData.styleProps"
            v-model:value="canvasPropData.styleProps.borderRight"
          />
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24" class="hv-visual-property-label">封面图：</a-col>
      </a-row>
      <a-row class="hv-margin-bottom10">
        <a-col :span="24">
          <hv-upload-img v-model:imgUrl="canvasPropData.coverImg" v-if="canvasPropData" />
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent,type  PropType, ref, watch } from "vue";
import BackgroundImage from "../common/BackgroundImage.vue";
import ColorDropdownPicker from "@/visual/components/color-picker/ColorDropdownPicker.vue";
import BorderStyleInput from "../common/BorderStyleInput.vue";
import UploadImg from "../common/UploadImg.vue";
import VisualPropertySubRow from "../common/VisualPropertySubRow.vue";
import type DashboardCanvasType from "@/visual/commons/types/dashboard-canvas-type";
import type DashboardCategoryType from "@/visual/commons/types/dashboard-category-type";

export default defineComponent({
  name: "DesignerCanvasPropPanel",
  components: {
    hvBackgroundImage: BackgroundImage,
    hvColorDropdownPicker: ColorDropdownPicker,
    hvBorderStyleInput: BorderStyleInput,
    hvUploadImg: UploadImg,
    hvVisualPropertySubRow: VisualPropertySubRow,
  },
  props: {
    canvasData: {
      type: Object as PropType<DashboardCanvasType>,
      default: () => {},
    },
    resolutionRatioList: {
      type: Array as PropType<any[]>,
      defult: () => [],
    },
    categoryList:{
      type: Array as PropType<DashboardCategoryType[]>,
      defult: () => [],
    },
    dashboardCategoryId:{
      type: String,
      default:''
    }
  },
  emits:['update:dashboardCategoryId'],
  setup(props,{ emit }) {
    const canvasPropData = ref<any>();
    const categoryId= ref<string>('');

    const selectResolutionRatio = (val: string) => {
      const splitChar = -1 !== val.indexOf("x") ? "x" : "X";
      const canvasDimensions = val.trim().split(splitChar);
      if (canvasPropData.value && canvasPropData.value.canvasDimensions) {
        canvasPropData.value.canvasDimensions.width = Number.parseInt(
          canvasDimensions[0]
        );
        canvasPropData.value.canvasDimensions.height = Number.parseInt(
          canvasDimensions[1]
        );
      }
    };

    const selectCategory = (val:string)=>{
      emit('update:dashboardCategoryId',val);
    }

    watch(
      () => props.canvasData,
      () => {
        canvasPropData.value = props.canvasData;
      },
      { deep: true, immediate: true }
    );

    watch(
      () => props.dashboardCategoryId,
      () => {
        categoryId.value = props.dashboardCategoryId;
      },
      { deep: true, immediate: true }
    );

    return {
      canvasPropData,
      categoryId,
      selectResolutionRatio,
      selectCategory
    };
  },
});
</script>

<style lang="less" scoped>
@import "./DesignerCanvasPropPanel.less";
</style>
